<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
		<title>太阳系</title>
	</head>
	<body>
		<div>
			<canvas width="1000" height="1000" id="canvas" style="background:#000">
				 
			</canvas>
			<script type="text/javascript">
				var canvas=document.getElementById('canvas');
				var c=canvas.getContext('2d');
				var time=0;
				function draw(){
					// 清除画布
					c.clearRect(0,0,1000,1000);
					// 画轨道
					c.beginPath();
					c.strokeStyle="#fff";
					c.arc(500,500,100,0,360,false);
					c.closePath();
					c.stroke();
					// 画太阳
						c.beginPath();
						// 圆心x，圆心y，半径
						var suncolor=c.createRadialGradient(500,500,0,500,500,20);
						// 添加开始颜色 中间可以添加多个（0.5，“#FFF”）；
						suncolor.addColorStop(0,"#f00");
						// 添加结束颜色
						suncolor.addColorStop(1,"#f90");
						c.arc(500,500,20,0,360,false);
						c.fillStyle=suncolor;
						c.closePath();
						c.fill();

					// 画地球
						c.save();
						c.translate(500,500);
						// c.rotate(90*Math.PI/180);
						c.rotate(time/365*360*Math.PI/180);
						c.beginPath();
						var earth=c.createRadialGradient(0,-100,0,0,-100,10);
						earth.addColorStop(0,"#78b1e8");
						earth.addColorStop(1,"#050c12");
						c.arc(0,-100,10,0,360,false);
						c.closePath();
						c.fillStyle = earth;
						c.fill();
						c.restore();
					time+=1;
				}
				setInterval(draw,10);
			</script>
		</div>
		<div>
			<canvas id="sunSys" width="1000" height="1000" style="background:#000"></canvas>
			<script type="text/javascript">
				var sys=document.getElementById("sunSys").getContext('2d');
				// 画轨道
				function drawTrack(){
					for (var i = 8 - 1; i >= 0; i--) {
						sys.beginPath();
						sys.arc(500,500,(i+1)*50,0,360,false);
						sys.strokeStyle="#fff";
						sys.closePath();
						sys.stroke();
					};
				}
				drawTrack();
				function Star(x,y,radius,cycle,scolor,ecolor){
					// 星球的坐标
					this.x=x;
					this.y=y;
					// 星球的半径
					this.radius=radius;
					// 星球的颜色（开始颜色和结束色）
					this.scolor=scolor;
					this.ecolor=ecolor;
					this.acolor=null;
					// 公转周期
					this.cycle=cycle;
					// 设置计数时间
					this.rtime=0;
					this.draw=function(){
						sys.save();
						sys.translate(500,500);
						sys.rotate(time*(360/this.cycle)*Math.PI/180);

						sys.beginPath();
						sys.arc(this.x,this.y,this.radius,0,360,false);
						sys.closePath();
						// 填充星球颜色
						// 设置渐变颜色
						this.acolor=sys.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
						this.acolor.addColorStop(0,this.scolor);
						this.acolor.addColorStop(1,this.ecolor);
						sys.fillStyle=this.acolor;
						sys.fill();

						sys.restore();
						this.rtime+=1;
					}
				}

				function Sun(){
					Star.call(this,0,0,20,0,"#f00","#f90");
				}
				function Mercury(){
					Star.call(this,0,-50,10,87.70,"#A69697","#5c3e40");
				}
				function Venus(){
					Star.call(this,0,-100,10,224.701,"#c4bbac","#1f1315");
				}
				function Earth(){
					Star.call(this,0,-150,10,365.224,"#78b1e8","#050c12");
				}
				function Mars(){
					Star.call(this,0,-200,10,686.98,"#cec9b6","#76422d");
				}
				function Jupiter(){
					Star.call(this,0,-250,10,4332.589,"#F7f9e3","#322222");
				}
				function Staurn(){
					Star.call(this,0,-300,10,10759.5,"#C0a48e","#5c4533");
				}
				function Uranus(){
					Star.call(this,0,-350,10,30799.095,"#a7e1e5","#19243a");
				}

				var sun=new Sun();
				var mercury=new Mercury();
				var venus=new Venus();
				var earth=new Earth();
				var mars=new Mars();
				var jupiter=new Jupiter();
				var staurn=new Staurn();
				var uranus=new Uranus();
				function run(){
					sys.clearRect(0,0,1000,1000);
					drawTrack();
					sun.draw();
					mercury.draw();
					venus.draw();
					earth.draw();
					mars.draw();
					jupiter.draw();
					staurn.draw();
					uranus.draw();
				}
				
				setInterval(run,10);
 			</script>
		</div>
	</body>
</html>